<template>
  <div class="ek-page">
    <ekDesc title="地区管理" desc="地区管理模块用于管理物流系统中的地区信息。通过该模块为每个地区绑定对应的币种，以便在最终结算时显示对应地区需要支付的金额。" @click="handleClick"/>
    <ekList :layoutData="layoutData" ref="refList"  style="display: flex;height: calc(100% - 146px); margin-top: 8px;">
      <template v-slot:operate>
        <ekBtnGroup :buttons="buttons" @operate="handleOperate" />
      </template>
      <template #operateColumn="{ scope }">
        <ekBtnGroup
          mode="column"
          size="small"
          :buttons="columnButtons"
          @operate="(item) => handleOperate(item, scope)"
        />
      </template>
    </ekList>
    <Mode
      :title="title"
      :rowId="rowId"
      :disabled="disabled"
      v-model:visiable="visiable"
      @submit="confirm"
    />
    <Auth
      :row="row"
      title="绑定币种"
      v-model:visiable="authVisiable"
      @submit="confirm"
    />
  </div>
</template>

<script setup>
import { onMounted, getCurrentInstance, ref, defineComponent } from "vue";
import ekDesc from "@/components/business/ekDesc/index.vue";

import ekList from "@/components/business/ekList/index.vue";
import ekBtnGroup from "@/components/business/ekList/components/ekBtnGroup.vue";
import {
  configs,
  searchs,
  pages,
  columns,
  buttons,
  columnButtons,
  apis,
} from "./data.js";
import Mode from "./components/Mode.vue";
import Auth from "./components/Auth.vue";

defineComponent({
  name: "role-index",
});

const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

const { $storage, $http, $ekMessage, $ekMessageBox } = globalProperties;

let refList = ref(null);
// 表格头部
let layoutData = ref({
  modelCode: "MODEL_BUSINESS_ROLE",
  configs,
  searchs,
  pages,
  columns,
});

const handleClick = () => {
  window.open(process.env.DOCS_URL+'src/guide/app-base/area/country/','_blank');
}
const authVisiable = ref(false);
const visiable = ref(false);
const rowId = ref("");
const row = ref({});

const title = ref("");
const disabled = ref(false);
const handleOperate = (item, scope) => {
  switch (item.operate) {
    case "add":
      add();
      break;
    case "edit":
      edit(scope);
      break;
    case "deleteAll":
      deleteAll();
      break;
    case "delete":
      deleteOne(scope);
      break;
    case "detail":
      detail(scope);
      break;
    case "auth":
      auth(scope);
      break;
  }
};
const auth = (scope) => {
  row.value = scope.row;
  authVisiable.value = true;
};
const detail = (scope) => {
  title.value = "详情";
  rowId.value = scope.row.id;
  visiable.value = true;
  disabled.value = true;
};
const add = () => {
  title.value = "新增";
  rowId.value = "";
  visiable.value = true;
  disabled.value = false;
};
const edit = (scope) => {
  title.value = "编辑";
  rowId.value = scope.row.id;
  visiable.value = true;
  disabled.value = false;
};
const deleteOne = (scope) => {
  let ids = [scope.row.id];
  del(ids);
};
const deleteAll = () => {
  let rows = refList.value.getSelectionRows();
  if (rows.length == 0) {
    $ekMessage.warning("请选择操作数据");
    return;
  }
  let ids = rows.map((item) => item.id);
  del(ids);
};
const del = (ids) => {
  $ekMessageBox.confirm("确认删除？").then(() => {
    $http
      .delete(apis.del, {
        params: {
          ids: ids,
        },
      })
      .then((res) => {
        $ekMessage.success("操作成功");
        refresh();
      });
  });
};
const confirm = (done) => {
  refresh();
  done();
};
const refresh = () => {
  refList.value.refresh();
};
</script>
